import styled from "styled-components";

export const ThemeHeaderWrapped = styled.div`

  padding:0 10px 0 34px;
  display: flex;
  justify-content: space-between;
  height: 35px;
  border-bottom:2px solid #C10D0C;
  background:url(${require("@/assets/image/sprite_02.png")});
  background-position: -225px -154px;
  background-repeat:no-repeat;
  font-size:12px;

  .left {

    display: flex;

    .keyword {
      display: flex;
      margin: 8px 0 0 20px;

      .item {
        a, span {
          font-size: 12px;
        }

        a {
          color: #666;
          &:hover{
            text-decoration:underline;
          }
        }

        span {
          margin: 0 10px 0 10px;
          color: #ccc;
        }
      }
    }

    .theme-title {
      font-size: 20px;
      color: #333;
      height: 28px;
    }
  }
  
  .right{
    padding-top:9px;
    a{
      font-size:12px;
      color:#666;
      &:hover{
        text-decoration:underline;
      }
    }
    
    i{
      margin-left:4px;
      display:inline-block;
      transform:translateY(3px);
      height:12px;
      width:12px;
      background-position:0 -240px;
    }
  }
`;
